<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>负载均衡测试</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <!-- 导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
            <div class="container-fluid">
                <a class="navbar-brand" href="/announcements">校园公告系统</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="/announcements">公告列表</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/announcements/add">新增公告</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="/lb-test">负载均衡测试</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/feign-test">OpenFeign测试</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/circuit-test">熔断测试</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="http://127.0.0.1:9411/" target="_blank">链路跟踪</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="card">
            <div class="card-header bg-primary text-white">
                <h3>负载均衡测试页面</h3>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <h4>服务器信息</h4>
                    <ul class="list-group mt-3">
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            服务器端口
                            <span class="badge bg-primary rounded-pill" th:text="${serverPort}">8080</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            实例ID
                            <span class="badge bg-success rounded-pill" th:text="${instanceId}">instance-id</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            主机名称
                            <span class="badge bg-secondary rounded-pill" th:text="${hostName}">localhost</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            主机地址
                            <span class="badge bg-info rounded-pill" th:text="${hostAddress}">127.0.0.1</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            请求时间戳
                            <span class="badge bg-dark rounded-pill" th:text="${timestamp}">0</span>
                        </li>
                    </ul>
                </div>
                
                <div class="mt-4">
                    <button id="refreshBtn" class="btn btn-primary">刷新信息</button>
                    <button id="switchPortBtn" class="btn btn-info ms-2">切换端口</button>
                    <button id="autoRefreshBtn" class="btn btn-success ms-2">自动刷新 <span id="countdown">5</span>s</button>
                    <button id="stopAutoRefreshBtn" class="btn btn-danger ms-2" style="display: none;">停止自动刷新</button>
                    <a href="/announcements" class="btn btn-secondary ms-2">返回列表</a>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 获取当前端口和另一个端口
        const currentPort = window.location.port || '8080';
        const otherPort = currentPort === '8080' ? '8081' : '8080';
        
        // 手动刷新
        document.getElementById('refreshBtn').addEventListener('click', function() {
            location.reload();
        });
        
        // 切换端口
        document.getElementById('switchPortBtn').addEventListener('click', function() {
            window.location.href = `http://localhost:${otherPort}/lb-test`;
        });
        
        // 自动刷新功能
        let autoRefreshInterval;
        let countdownInterval;
        let seconds = 5;
        let togglePort = false; // 是否切换端口
        
        document.getElementById('autoRefreshBtn').addEventListener('click', function() {
            startAutoRefresh();
        });
        
        document.getElementById('stopAutoRefreshBtn').addEventListener('click', function() {
            stopAutoRefresh();
        });
        
        function startAutoRefresh() {
            document.getElementById('autoRefreshBtn').style.display = 'none';
            document.getElementById('stopAutoRefreshBtn').style.display = 'inline-block';
            
            seconds = 5;
            document.getElementById('countdown').textContent = seconds;
            
            countdownInterval = setInterval(function() {
                seconds--;
                document.getElementById('countdown').textContent = seconds;
                
                if (seconds <= 0) {
                    seconds = 5;
                }
            }, 1000);
            
            autoRefreshInterval = setInterval(function() {
                // 每次自动刷新时切换端口
                togglePort = !togglePort;
                if (togglePort) {
                    window.location.href = `http://localhost:${otherPort}/lb-test`;
                } else {
                    location.reload();
                }
            }, 5000);
        }
        
        function stopAutoRefresh() {
            clearInterval(autoRefreshInterval);
            clearInterval(countdownInterval);
            document.getElementById('autoRefreshBtn').style.display = 'inline-block';
            document.getElementById('stopAutoRefreshBtn').style.display = 'none';
        }
    </script>
</body>
</html> 